<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Language" content="en"/>
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#4188c9">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="/static/images/favicon.png" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="/static/images/favicon.png"/>
    <!-- Generated: 2018-04-16 09:29:05 +0200 -->
    <title>Fabric Net Server - github.com/aberic/fabric-net-server</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
    <script src="/static/js/require.min.js"></script>
    <script>
        requirejs.config({
            baseUrl: '.'
        });
    </script>
    <!-- Dashboard Core -->
    <link href="/static/css/dashboard.css" rel="stylesheet"/>
    <script src="/static/js/dashboard.js"></script>
    <!-- c3.js Charts Plugin -->
    <link href="/static/plugins/charts-c3/plugin.css" rel="stylesheet"/>
    <script src="/static/plugins/charts-c3/plugin.js"></script>
    <!-- Input Mask Plugin -->
    <script src="/static/plugins/input-mask/plugin.js"></script>
</head>

<body class="">
<div class="page">
    <div class="page-main">
        <div th:include="fns_header :: header"></div>
        <div class="my-3 my-md-5">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <form class="card" enctype="multipart/form-data" th:action="@{submit}" th:method="post"
                              th:object="${chaincode}">
                            <div class="card-header">
                                <h3 class="card-title" th:text="${intentLittle}"></h3>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 col-lg-12">
                                        <div class="form-group">
                                            <label for="league-name" class="form-label" th:text="#{channel_list}"></label>
                                            <select id="league-name" class="form-control custom-select"
                                                    th:field="*{channelId}">
                                                <option th:each="channel: ${channels}" th:value="${channel.id}"
                                                        th:text="${channel.leagueName}+'-'+${channel.orgName}+'-'+${channel.peerName}+'-'+${channel.name}"></option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="ca" class="form-label" th:text="#{ca}"></label>
                                            <select id="ca" class="form-control custom-select"
                                                    th:field="*{flag}">
                                                <option th:each="ca: ${cas}" th:value="${ca.flag}"
                                                        th:text="${ca.leagueName}+'-'+${ca.orgName}+'-'+${ca.peerName}+'-'+${ca.name}"></option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label" th:text="#{chaincode_name}"></label>
                                            <input type="text" class="form-control is-valid"
                                                   name="example-text-input-valid"
                                                   th:placeholder="#{chaincode_name_placeholder}"
                                                   id="name"
                                                   onblur="check('name')"
                                                   th:field="*{name}">
                                            <input type="hidden" name="intent" th:value="${intent}"/>
                                            <input type="hidden" name="id" th:value="${chaincode.id}"/>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label" th:text="#{chaincode_version}"></label>
                                            <input type="text" class="form-control is-valid"
                                                   name="example-text-input-valid"
                                                   id="version"
                                                   onblur="check('version')"
                                                   th:placeholder="#{chaincode_version_placeholder}"
                                                   th:field="*{version}">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label" th:text="#{chaincode_proposal_wait_time}"></label>
                                            <input type="text" class="form-control is-valid"
                                                   name="example-text-input-valid"
                                                   id="proposalWaitTime"
                                                   onblur="check('proposalWaitTime')"
                                                   th:placeholder="#{chaincode_proposal_wait_time_placeholder}"
                                                   th:field="*{proposalWaitTime}">
                                        </div>
                                        <div class="form-group">
                                            <div class="form-label" th:text="#{chaincode_and_policy}"></div>
                                            <div class="custom-file">
                                                <input id="crypto-file" type="file" class="custom-file-input"
                                                       name="sourceFile" onchange="getFileName()">
                                                <label id="crypto-file-label" class="custom-file-label"
                                                       th:text="#{chaincode_and_policy_placeholder}"></label>
                                                <script>
                                                    function getFileName() {
                                                        document.getElementById("crypto-file-label").innerText = $("#crypto-file").val();
                                                    }
                                                </script>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="form-label" th:text="#{instantiate}"></div>
                                            <label class="custom-switch">
                                                <input type="checkbox" name="custom-switch-checkbox" th:name="init"
                                                       th:value="${init}"
                                                       class="custom-switch-input">
                                                <span class="custom-switch-indicator"></span>
                                                <span class="custom-switch-description" th:text="#{open}"></span>
                                            </label>
                                        </div>
                                        <div class="form-group" th:object="${api}">
                                            <label class="form-label" th:text="#{chaincode_api_params}"></label>
                                            <textarea class="form-control" rows="10"
                                                      th:placeholder="#{chaincode_api_params_placeholder}"
                                                      th:field="*{exec}"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <div class="form-label" th:text="#{chaincode_event_listen}"></div>
                                            <label class="custom-switch">
                                                <input type="checkbox"
                                                       name="custom-switch-checkbox"
                                                       th:field="*{chaincodeEventListener}"
                                                       class="custom-switch-input"
                                                       onclick="switchBtnBind($(this))"
                                                       id="chaincodeEventListener">
                                                <span class="custom-switch-indicator"></span>
                                                <span class="custom-switch-description" th:text="#{open}"></span>
                                            </label>
                                        </div>
                                        <div class="form-group" id="location_group" style="display: none">
                                            <label class="form-label" th:text="#{chaincode_callback_location}"></label>
                                            <input type="text" class="form-control is-valid"
                                                   name="example-text-input-valid"
                                                   th:placeholder="#{chaincode_callback_location_placeholder}"
                                                   th:field="*{callbackLocation}">
                                        </div>
                                        <div class="form-group" id="event_group" style="display: none">
                                            <label class="form-label" th:text="#{chaincode_events}"></label>
                                            <input type="text" class="form-control is-valid"
                                                   name="example-text-input-valid"
                                                   th:placeholder="#{chaincode_events_placeholder}"
                                                   th:field="*{events}">
                                        </div>
                                        <div class="card-footer text-right">
                                            <div class="d-flex">
                                                <button type="submit" class="btn btn-primary ml-auto"
                                                        th:text="${submit}">
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:include="fns_footer :: footer"></div>
</div>
<script src="https://unpkg.com/ionicons@4.2.4/dist/ionicons.js"></script>
<script>
    function check(idStr){
        var that = $("#"+idStr)
        var parent = that.parent()
        if(that.val().trim()==""){
            var msg;
            if(idStr=="name"){
                msg = "名称不能为空"
            }else if(idStr=="version"){
                msg="版本不能为空"
            }else if(idStr=="proposalWaitTime"){
                msg="提案超时时间不能为空"
            }

            that.addClass("is-invalid")
            if(parent.children("[name='nameError']").length==0){
                parent.append('<div name="nameError" class="invalid-feedback">'+msg+'</div>')
            }
            return false;
        }else{
            that.removeClass("is-invalid")
            parent.children("[name='nameError']").remove();
            return true
        }
    }

    function switchBtnBind(that){
        var checked = that.is(".custom-switch-input:checked")

        //打开状态，此时显示
        if (checked){
            $("#location_group").attr("style","display:block;");
            $("#event_group").attr("style","display:block;");
        }else{
            $("#location_group").attr("style","display:none;");
            $("#event_group").attr("style","display:none;");
        }
    }

    require(['c3', 'jquery'], function (c3, $) {

        $(document).ready(function () {
            $("#submitBtn").click(function(){
                return check("name") && check("version")&& check("proposalWaitTime")
            })
            switchBtnBind($('#chaincodeEventListener'))
        })
    });
</script>
</body>

</html>
